<template>
	<el-form ref="form" :rules="rules" :model="form" label-width="100px" @submit.prevent="onSubmit" style="margin:20px;min-width:600px;">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="基本信息" name="first">
				<el-form-item label="活动排序">
					<el-col :span="12">
						<el-input v-model="form.displayorder"></el-input>
						<label class="subinfo">数字越大，排名越靠前,如果为空，默认排序方式为创建时间</label>
					</el-col>
				</el-form-item>
				<el-form-item label="活动名称" prop="title">
					<el-col :span="12">
						<el-input v-model="form.title"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="副标题" prop="subtitle">
					<el-col :span="12">
						<el-input v-model="form.subtitle"></el-input>
						<label class="subinfo">副标题用于补充描述活动的扣课情况和费用</label>
					</el-col>
				</el-form-item>
				<el-form-item label="限报人数" prop="total">
					<el-row>
						<el-col :span="6">
							<el-input-number v-model="form.total" controls-position="right" style="width: 100%;" :disabled="disabled"></el-input-number>
						</el-col>
						<el-col :span="4">&nbsp;&nbsp;人</el-col>
					</el-row>
					<label class="subinfo">活动的名额设置, 若启用活动多规格，则此处设置无效</label>
				</el-form-item>
				<el-form-item label="活动费用" prop="price">
					<el-row>
						<el-col :span="6">
							<el-input-number v-model="form.price" controls-position="right" :precision="2" :min="0" style="width: 100%;" :disabled="disabled"></el-input-number>
						</el-col>
						<el-col :span="4">&nbsp;&nbsp;元</el-col>
					</el-row>
					<label class="subinfo">活动费用为用户实际需要支付的价格，只填写数字</label>

				</el-form-item>
				<el-form-item label="活动时间" prop="presell_time">
					<el-col :span="24">
						<el-date-picker v-model="presell_time" type="datetimerange" range-separator=" 至 " placeholder="请选择时间段"
						 @change="getpresellTimerang" value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</el-col>
					<label class="subinfo">允许活动报名的时间范围</label>
				</el-form-item>
				<el-form-item label="上课时间" prop="start_time">
					<el-col :span="24">
						<el-date-picker v-model="form.start_time" type="datetime" placeholder="选择日期时间" @change="getstartTime" value-format="yyyy-MM-dd HH:mm:ss">
						</el-date-picker>
					</el-col>
					<label class="subinfo">实际上课时间，用于提前推送上课提醒</label>
				</el-form-item>
				<el-form-item label="主办中心" prop="host_store_id">
					<el-select v-model="form.host_store_id" filterable placeholder="请选择" style="width: 50%" @change="selectCenter">
						<el-option v-for="item in optionsCenter" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
					<br>
					<span class="subinfo">主办中心为金额结算中心，存在多中心联合发起的活动，金额最终将结算至此中心</span>

				</el-form-item>
				<el-form-item label="适用中心">
					<el-select v-model="form.apply_ids" multiple placeholder="请选择" style="width: 50%" @change="selectApply">
						<el-option v-for="item in optionsCenter" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
					<br>
					<span class="subinfo">此处留空将适用于全部中心，将被该商户下的所有门店用户所见</span>
				</el-form-item>
				<el-form-item label="活动图片" prop="banner">
					<div class="avatar-uploader">
						<el-upload action="string" accept="image/jpeg,image/gif,image/png" :http-request="uploadHttp" :show-file-list="true" :on-success="handleAvatarSuccess"
						 :on-change="onUploadChange" :before-upload="beforeAvatarUpload" :on-error="handleError" ref="upload">
							<img v-if="form.banner" :src="form.banner" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</div>
					<span class="subinfo">强制要求图片尺寸为 750*560 px 否则非常影响界面美观 </span>
				</el-form-item>
				<el-form-item label="报名通知">
					<el-row :gutter="10">
						<el-col :span="6">
							<ul class="inform">
								<li v-for="(user, index) in users" :key="index">{{user.nickname}}<i class="el-icon-close" style="cursor: pointer" @click="deleteOneInform(index)"></i></li>
							</ul>
<!--							<el-input v-model="form.users" :disabled="true"></el-input>-->
						</el-col>
						<el-col :span="4">
							<searchUsers @increase="choiceUsers"></searchUsers>
						</el-col>
					</el-row>
				</el-form-item>
<!--				<el-form-item label="自动上架">-->
<!--					<el-switch v-model="form.auto_status" :active-value="1" :inactive-value="0"></el-switch>-->
<!--					<label class="subinfo"> 活动在选择时间内自动上架，过期自动下架</label>-->
<!--				</el-form-item>-->
<!--				<el-form-item label="上架时间" v-if="form.auto_status">-->
<!--					<el-col :span="24">-->
<!--						<el-date-picker v-model="auto_time" type="datetimerange" range-separator=" 至 " placeholder="请选择时间段" @change="getautoTimerang"-->
<!--						 value-format="yyyy-MM-dd HH:mm:ss">-->
<!--						</el-date-picker>-->
<!--					</el-col>-->
<!--				</el-form-item>-->
				<el-form-item label="是否隐藏">
					<el-switch v-model="form.list_hide" :active-value="1" :inactive-value="0"></el-switch>
					<label class="subinfo"> 是否从活动列表中隐藏该活动</label>
				</el-form-item>
				<el-form-item label="支持退款">
					<el-switch v-model="form.is_refund" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
				<el-form-item label="自动退款">
					<el-switch v-model="form.is_auto_refund" :active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
				<el-form-item label="是否等位">
					<el-switch v-model="form.is_line" :active-value="1" :inactive-value="0" :disabled="isLineDisabled"></el-switch>
				</el-form-item>
			</el-tab-pane>
			<el-tab-pane label="活动详情" name="second">
				<el-form-item label="活动详情">
					<!-- 图片上传组件辅助-->
					<!--                    <el-upload-->
					<!--                            class="avatar-uploader up-img"-->
					<!--                            style="display: none"-->
					<!--                            action="/api/activity/visitor/uploadimage"-->
					<!--                            name="image"-->
					<!--                            :show-file-list="false"-->
					<!--                            :on-success="uploadSuccess"-->
					<!--                            :on-error="uploadError">-->
					<!--                    </el-upload>-->
					<!--                    <quill-editor v-model="form.content" ref="myQuillEditor" class="myQuillEditor" :options="editorOption" @ready="onEditorReady($event)">-->
					<!--                    </quill-editor>-->
					<div>
						<Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
						<!--                        <el-button @click="returnContent">显示编辑器内容</el-button>-->
						<!--                        <div>{{dat.content}}</div>-->
					</div>
				</el-form-item>
			</el-tab-pane>
			<el-tab-pane label="规格" name="third">
				<el-form-item label="规格">
					<el-switch v-model="form.hasoption" :active-value="1" :inactive-value="0" @change="hasoptionSelect"></el-switch>
					<label class="subinfo" style="display: block;">启用活动规格后，该活动不支持等为位功能，活动的价格及报名人数以活动规格为准,报名人数设置为0则会到”已报满“中，手机也不会显示,
						-1为不限制</label>
					<div v-if="form.hasoption === 1">
						<el-card shadow="hover" style="margin-bottom: 20px">
							1. 拖动规格可调整规格显示顺序, 更改规格及规格项后请点击下方的【刷新规格项目表】来更新数据。<br>
							2. 每一种规格代表不同价格类型，例如上午场、下午场为一种规格，一家三口、一家五口为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能付款。<br>
							3.本功能多用于大型活动的多种价格规格。
						</el-card>
						<ul style="margin-bottom: 30px" class="spec">
							<li v-for="(items, index) in list" :key="index">
								<el-row>
									<el-col :span="18">
										<el-input v-model="items.title" placeholder="规格名称 (比如: 颜色)" style="height: 42px;line-height: 42px;"></el-input>
									</el-col>
									<el-col :span="6">
										<el-button-group>
											<el-button type="primary" icon="el-icon-plus" @click="addSonInput(index)">添加规格项</el-button>
											<el-button type="danger" icon="el-icon-delete" @click="deleteCurrent(items,index)"></el-button>
										</el-button-group>
									</el-col>
								</el-row>
								<div style="display: flex;flex-wrap: wrap">
									<div class="lis" v-for="(i, ins) in items.item" :key="ins">
										<el-input v-model="i.title" placeholder="请输入内容"></el-input>
										<el-button type="danger" icon="el-icon-close"@click="deleteCurrentSon(items,ins)"></el-button>
									</div>
								</div>
							</li>
						</ul>
						<el-button type="primary" icon="el-icon-plus" @click="addInput">添加规格</el-button>
						<el-button type="primary" icon="el-icon-refresh" @click="refresh">刷新规格项目表</el-button>
						<span style="font-size: 12px;color: #909399;padding-left: 20px">第二次刷新，数据将会清空</span>
						<div style="margin-top: 20px" v-if="isShowTable">
							<el-table
									:data="tableData"
									border
									style="width: 100%">
								<el-table-column
										prop="spec"
										label="规格"
										width="180">
									<template slot-scope="scope">
										<span>{{ scope.row.title }}</span>
									</template>
								</el-table-column>
								<el-table-column
										prop="total"
										label="报名人数"
										width="180">
									<template slot-scope="scope">
										<el-input v-model="scope.row.total" placeholder=""></el-input>
									</template>
								</el-table-column>
								<el-table-column
										prop="price"
										label="费用">
									<template slot-scope="scope">
										<el-input v-model="scope.row.price" placeholder=""></el-input>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<!-- <el-button type="danger" @click="conTable">打印表格数据</el-button>-->
						<!--	确认删除此规格dialog	-->
						<el-dialog
								title="提示"
								:visible.sync="delDialogVisible"
								width="30%">
							<span>确认要删除此规格?</span>
							<span slot="footer" class="dialog-footer">
								<el-button @click="delDialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="sureDel">确 定</el-button>
							</span>
						</el-dialog>
<!--						<spec></spec>-->
					</div>
				</el-form-item>

			</el-tab-pane>
			<el-tab-pane label="自定义表单" name="fourth">
				<el-form-item label="自定义表单">
					<el-switch v-model="form.diyformtype" :active-value="1" :inactive-value="0"></el-switch>
					<label class="subinfo" style="display: block;">启用活动规格后，该活动不支持等为位功能，活动的价格及报名人数以活动规格为准,报名人数设置为0则会到”已报满“中，手机也不会显示,
						-1为不限制</label>
				</el-form-item>
			</el-tab-pane>
		</el-tabs>

		<el-form-item>
			<el-button type="primary" @click="submitForm('form')" :loading="addLoading">保存活动</el-button>
			<el-button @click="back">取消</el-button>
			<el-button @click="resetForm('form')">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
	import {activeCenter, addActive, upImg} from '../../api/goodsAPI'
	// import { addgoods } from '../../api/api';
	import spec from '@/components/spec';
	import searchUsers from '@/components/searchUsers';
	import {quillEditor} from 'vue-quill-editor'; //调用富文本编辑器
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import Uediter from '../../components/UE.vue';
	// 执行组合排列的函数
	function doExchange(array){
		let len = array.length;
		// 当数组大于等于2个的时候
		if(len >= 2){
			// 第一个数组的长度
			let len1 = array[0].length;
			// 第二个数组的长度
			let len2 = array[1].length;
			// 2个数组产生的组合数
			let lenBoth = len1 * len2;
			//  申明一个新数组,做数据暂存
			let items = new Array(lenBoth);
			// 申明新数组的索引
			let index = 0;
			// 2层嵌套循环,将组合放到新数组中
			for(let i=0; i<len1; i++){
				for(let j=0; j<len2; j++){
					items[index] = array[0][i] +" , "+ array[1][j];
					index++;
				}
			}
			// 将新组合的数组并到原数组中
			let newArr = new Array(len -1);
			for(let i=2;i<array.length;i++){
				newArr[i-1] = array[i];
			}
			newArr[0] = items;
			// 执行回调
			return doExchange(newArr);
		}else{
			return array[0];
		}
	}

	//执行
	// let array = [['a', 'b'], [1, 2, 3]];
	// var arr1 = [['j','k','g']];
	// console.log(doExchange(array));

	export default {
		data() {
			return {
				disabled: false, // 多规格中限报人数、活动费用 需要禁用
				dat: {
					content: ''
				},
				ueditor: {
					value: '',
					config: {
						initialFrameWidth: 1000,
						initialFrameHeight: 500
					}
				},
				activeName: 'first',
				presell_time: [],
				auto_time:[],
				value3: [],
				addLoading: false,
				form: {
					displayorder: "", // 排序 这个字段还没有
					title: "", // 活动名称
					subtitle: "", // 副标题
					total: "", // 限报人数
					// sales: "", // 活动费用
					price: "", // 活动费用
					presell_start_time: '', // 活动时间开始
					presell_end_time: '', // 活动时间结束
					start_time: "", // 上课时间
					banner: "", // 活动图片
					hasoption: 0, // 是否多规格(0-否 1-是)（默认0）
					diyformtype: 0, // 是否自定义菜单(0-否 1-是)（默认0）
					status: 1, // 是否上架(0-下架 1-上架)（默认0），上架了 才有下面三个属性
					// auto_status: 0, // 是否自动上架(0-否 1-是)（默认0）
					// auto_status_start: 0, // 自动上架开始时间（默认0）
					// auto_status_end: 0, // 自动上架结束时间（默认0）
					host_store_id: '', // 活动主办中心id
					apply_ids: [],  // 活动适用中心id
					list_hide: 0, // 是否列表隐藏(0-否 1-是)
					is_refund: 1, // 是否支持退款(0-否 1-是)
					is_auto_refund: 0, // 是否支持自动退款(0-否 -是)
					notify_mid: [], // 报名通知id
					content: "", // 活动详情内容
					is_line: 1, // 是否支持等位(0-否 1-是)
					spec: [], // 多规格菜单（hasoption == 1 时有效 ，id=''为新增的数据）
					option: [], // 规格信息（hasoption == 1 时有效，id=''为新增的数据）
					// update_time: "",
				},
				newForm: {
					displayorder: "", // 排序 这个字段还没有
					title: "", // 活动名称
					subtitle: "", // 副标题
					total: "", // 限报人数
					// sales: "", // 活动费用
					price: "", // 活动费用
					presell_start_time: '', // 活动时间开始
					presell_end_time: '', // 活动时间结束
					start_time: "", // 上课时间
					banner: "", // 活动图片
					hasoption: 0, // 是否多规格(0-否 1-是)（默认0）
					diyformtype: 0, // 是否自定义菜单(0-否 1-是)（默认0）
					status: 0, // 是否上架(0-下架 1-上架)（默认0），上架了 才有下面三个属性
					auto_status: 0, // 是否自动上架(0-否 1-是)（默认0）
					auto_status_start: 0, // 自动上架开始时间（默认0）
					auto_status_end: 0, // 自动上架结束时间（默认0）
					host_store_id: '', // 活动主办中心id
					apply_ids: [],  // 活动适用中心id
					list_hide: 0, // 是否列表隐藏(0-否 1-是)
					is_refund: 1, // 是否支持退款(0-否 1-是)
					is_auto_refund: 0, // 是否支持自动退款(0-否 -是)
					notify_mid: [], // 报名通知id
					content: "", // 活动详情内容
					is_line: 1 // 是否支持等位(0-否 1-是)
					// delete_time: 0,
					// create_time: "",
					// update_time: "",
				},
				users: [], // 报名通知对象
				optionsCenter: [], // 主办中心 适用中心
				rules: {
					title: [{
							required: true,
							message: '请输入活动名称',
							trigger: 'blur'
						},
						{
							min: 3,
							message: '长度最少3个字符',
							trigger: 'blur'
						}
					],
					subtitle: [
						{
							required: true,
							message: '请输入副标题',
							trigger: 'blur'
						}
					],
					total: [{
						required: true,
						message: '请输入限报人数',
						trigger: 'blur'
					}],
					price: [{
						required: true,
						message: '请输入活动费用',
						trigger: 'blur'
					}],
					start_time: [{
						type: 'string',
						required: true,
						message: '请选择上课时间',
						trigger: 'blur'
					}],
					host_store_id: [{
						required: true,
						message: '请选择主办中心',
						trigger: 'change'
					}],
					banner: [{
						required: true,
						message: '至少有一张图片',
						trigger: 'change'
					}]
				},
				value: '',
				fileList:[],
				imgInfo: {},
				// 规格参数开始
				list: [],
				delDialogVisible: false,
				delObj: {},
				tableData: [],
				isShowTable: false,
				tableData2: [
					{
						spec: '2016-05-02',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1518 弄'
					},
					{
						spec: '2016-05-04',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1517 弄'
					},
					{
						spec: '2016-05-01',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1519 弄'
					},
					{
						spec: '2016-05-03',
						total: '王小虎',
						price: '上海市普陀区金沙江路 1516 弄'
					}
				],
				// 规格参数结束
				isLineDisabled: false
			}
		},
		created() {
			this._activeCenter() // 主办中心列表
		},
		computed: {
			editor() {
				return this.$refs.myQuillEditor.quill
			},
			newHasOption() {
				return this.form.hasoption
			}
			// newIsLine() {
			// 	return this.form.is_line
			// }
		},
		watch: {
			newHasOption(val) {
				// val === 1 ? this.disabled = true : this.disabled = false
				// this.isLineDisabled = true
				if (val === 1) {
					this.disabled = true
					this.form.is_line = 0
					this.isLineDisabled = true
				} else {
					this.disabled = false
					this.isLineDisabled = false
				}
			}
		},
		methods: {
			// 富文本里面的上传图片 成功的回调
			uploadSuccess(res, file) {
				// res为图片服务器返回的数据
				// 获取富文本组件实例
				console.log(res);
				let quill = this.$refs.myQuillEditor.quill
				// 如果上传成功
				if (res.code == 0 ) {
					//     // 获取光标所在位置
					let length = quill.getSelection().index;
					// 插入图片  res.url为服务器返回的图片地址
					quill.insertEmbed(length, 'image', res.data.filename)
					// 调整光标到最后
					quill.setSelection(length + 1)
				} else {
					this.$message.error('图片插入失败')
				}
				// // loading动画消失
				// this.quillUpdateImg = false
			},
			// 富文本里面的上传图片 失败的回调
			uploadError() {
				// loading动画消失
				// this.quillUpdateImg = false
				this.$message.error('图片插入失败')
			},
			// 基本信息里面的商城图片
			uploadHttp(params) {
				const _file = params.file;
				this.imgInfo = params.file;
				console.log(params)
				let formData = new FormData();
				formData.append("image", _file);
				upImg(formData, {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				}).then(res => {
					this.$message({
						type: 'success',
						message: '图片上传成功!'
					});
					console.log(res)
					this.form.banner = res.data.filename
				}).catch(err => {
					console.log(err)
					this.$message.error(err.response.data.message);
				});
			},
			// 适用中心选择 发生改变的 事件
			selectApply(val) {
				console.log(val)
				console.log(typeof val)
				this.form.apply_ids = [...val]
				console.log(this.form.apply_ids)
				// console.log(typeof this.form.apply_ids)
			},
			// 主办中心选择 发生改变的 事件
			selectCenter(val) {
				console.log(val)
				console.log(typeof val)
				this.host_store_id = val
				console.log(this.host_store_id)
			},
			// 请求 活动主办中心列表
			_activeCenter() {
				activeCenter().then(res => {
					console.log(res.data.store)
					this.optionsCenter = res.data.store
				})
			},
			back(){
				this.$router.go(-1);//返回上一层
			},
			// 提交表单
			submitForm(formName) {
				if (this.form.hasoption === 1) {
					let arr = this.tableData.map( item => item.total - 0)
					this.form.total = arr.reduce( (sum, current) => {
						return sum + current
					}, 0)
					let arr2 = this.tableData.map( item => item.price - 0)
					this.form.price = Math.min.apply(Math, arr2)
					this.form.spec = this.list
					this.form.option = this.tableData
				}
				this.form.content = this.$refs.ue.getUEContent()
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var preselltime=false,autotime=false;
						if(this.form.presell_start_time !==""){
							preselltime=true
						}else{
							preselltime=false;
							this.$message.error('请选择活动时间！');
						}
						if(this.form.auto_status === 1){
							if (this.form.auto_status_start !== "") {
								autotime=true
							} else{
								autotime=false;
								this.$message.error('请选择上架时间！');
							}
						}else{
							autotime=true
						}
						if (preselltime &&autotime) {
							this.$confirm('确认提交吗？', '提示', {}).then(() => {
								this.addLoading = true;
								//NProgress.start();
								let para = Object.assign({}, this.form);
								console.log(para)
								console.log(para.apply_ids)
								console.log(typeof para.apply_ids)
								addActive(para).then((res) => {
									this.addLoading = false;
									//NProgress.done();
									this.$message({
										message: '提交成功',
										type: 'success'
									})
									this.$refs['form'].resetFields();
									this.$router.push('/goodslistin')
								}).catch(err => {
									this.addLoading = false;
									let msg = err.response.data.message || '网络错误'
									this.$message({
										type: 'warning ',
										message: msg
									});
								})
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			// 富文本编辑
			onEditorReady(editor) {
				console.log(editor);
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 文件上传成功时的钩子
			handleAvatarSuccess(res, file, fileList) {
				console.log(res)
				console.log(file)
				console.log(fileList)
				// this.form.banner = URL.createObjectURL(file.raw);
			},
			// 文件上传失败时的钩子
			handleError(err, file, fileList) {
				console.log(err)
				console.log(file)
				console.log(fileList)
				this.$notify.error({
					title: '错误',
					message: `文件上传失败`
				});
			},
			// 上传文件之前的钩子
			beforeAvatarUpload(file) {
				console.log(file)
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			// 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
			onUploadChange(file,fileList) {
				// let reader = new FileReader();
				// this.form.banner = URL.createObjectURL(file.raw);
				// console.log(URL.createObjectURL(file.raw))
				// reader.onload = function(e) {
				// 	console.log(this.result) //图片的base64数据
				// }
			},
			// 选择用户 子组件传过来的值
			choiceUsers(data) {
				this.users = data
				console.log(data)
				this.form.notify_mid = this.users.map(item => item.id)
				console.log(this.form.notify_mid)
			},
			// 删除选择的 报名通知人
			deleteOneInform(index) {
				console.log(index)
				this.users.splice(index, 1)
				console.log(this.users)
				this.form.notify_mid = this.users.map(item => item.id)
				console.log(this.form.notify_mid)
			},
			// 获取上课时间
			getstartTime(date) {
				this.time = date;
				this.form.start_time = this.time;
			},
			// 获取活动时间范围
			getpresellTimerang(date) {
				if (date === null) {
					this.form.presell_start_time = ''
					this.form.presell_end_time = ''
				} else {
					this.time = date;
					this.presell_time = this.time;
					this.form.presell_start_time = this.time[0];
					this.form.presell_end_time = this.time[1];
				}
				// this.time = date;
				// this.presell_time = this.time;
				// this.form.presell_start_time = this.time[0];
				// this.form.presell_end_time = this.time[1];
			},
			// 自动上下架时间
			getautoTimerang(date) {
				this.time = date;
				this.auto_time = this.time;
				this.form.auto_status_start = this.time[0];
				this.form.auto_status_end = this.time[1];
			},
			// 重置表单
			resetForm(formName) {
				this.$refs[formName].resetFields();
				// for (let key in this.form) {
				// 	this.form[key] = ''
				// }
				this.form = this.newForm
			},
			// 规格开关事件
			hasoptionSelect(val) {
				console.log(val)
				this.form.hasoption = val
				if (val === 1) {
					this.form.is_line = 0
				}

			},
			// 自定义菜单开关事件
			diyformtypeSelect(val) {
				console.log(val)
				this.form.diyformtype = val
			},
			//	规格方法
			addInput() {
				this.list.push({id: '', title:'',item: []})
			},
			deleteCurrent(data,index) {
				this.delDialogVisible = true
				console.log(data,index)
				this.delObj = data
			},
			sureDel() {
				this.delDialogVisible = false
				this.list = this.list.filter( (item) => this.delObj !== item)
				console.log(this.list)
			},
			addSonInput(index) {
				console.log(index)
				this.list[index].item.push({id: '',title: ''})
			},
			deleteCurrentSon(data, i) {
				console.log(data,i)
				data.item.splice(i, 1)
			},
			refresh() {
				console.log(this.list)
				if(this.list.length <= 0) {
					return
				}
				this.isShowTable = true
				console.log('刷新')
				let arr = this.list.map( items => {
					return items.item.map(ite => ite.title)
				})
				// console.log(arr)
				let combine = doExchange(arr)
				let arr2 = []
				console.log(combine)
				combine.forEach( (item, index) => {
					let obj = {}
					obj.title = item
					obj.id = ''
					obj.total = ''
					obj.price = ''
					arr2.push(obj)
				})
				console.log(arr2)
				this.tableData = arr2
			},
			conTable() {
				console.log(this.tableData)
			}

		},

		components: {
			quillEditor, //富文本
			spec, //规格组件
			searchUsers, //搜索用户
			Uediter
		}
	}
</script>

<style scoped lang="scss">
	@import '~scss_vars';

	.subinfo {
		font-size: 12px;
		color: $font-color-light;
	}

	.avatar-uploader {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		width: 300px;
		height: 224px;
	}

	.avatar-uploader:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 300px;
		height: 224px;
		line-height: 224px;
		text-align: center;
	}

	.avatar {
		width: 300px;
		height: 224px;
		display: block;
	}
	.inform {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		align-items: center;
		background-color: #DCDFE6;
		border-radius: 4px;
	}
	.inform li {
		/*margin: 5px;*/
		display: inline-block;
		padding-right: 10px;
		background-color: #F2F6FC;
	}
	.spec {
		list-style: none;
		margin: 0;
		padding: 0;
		li {
			border: 1px solid #DCDFE6;
			padding: 10px;
			margin-bottom: 10px;
			.lis {
				display: flex;
				width: 30.4%;
				margin: 5px 5px 5px 0;
			}
		}
	}
</style>
